<template>
	<view class="content-box">
		<u-notify ref="uNotify"></u-notify>
		<view style="width: 100%; margin-bottom: 16px;">
			<u-search 
			placeholder="请输入项目名" 
			v-model="keyword" 
			shape="square" 
			:showAction="true"
			:animation="true"
			@search="getProjects"></u-search>
		</view>
		<u-loading-page :loading="isLoading"></u-loading-page>
		<u-list
			style=" margin-bottom: 50px;"
			@scrolltolower="scrolltolower">
			<u-list-item
				v-for="(item, index) in indexList"
				:key="index">
				<view class="project-box">
					<view class="project-header-box">
						<u--image 
							:src="'https://tools.xing-z.com' + item.img + '?token=' + token"
							shape="square" 
							width="50"
							height="50"
							radius="5px">
						</u--image>
						<view style="position: absolute; top: 0px; left: 60px; font-size: 14px;"> {{ item.name }} </view>
						<view style="position: absolute; top: 20px; left: 60px; font-size: 10px;"> 创建用户: {{ item.createUserName }} </view>
						<view style="position: absolute; top: 34px; left: 60px; font-size: 10px;"> 创建时间: {{ item.createTime }} </view>
					</view>
					<view class="content-box-row-between">
						<view class="content-box-center project-item-box" @click="onClickItem('api', item.id)">
							<view>{{ item.apiNumber }}</view>
							<view>接口</view>
						</view>
						<view class="content-box-center project-item-box" @click="onClickItem('aop', item.id)">
							<view>{{ item.aopNumber }}</view>
							<view>拦截器</view>
						</view>
						<view class="content-box-center project-item-box" @click="onClickItem('response', item.id)">
							<view>{{ item.responseNumber }}</view>
							<view>修饰器</view>
						</view>
					</view>
					<view class="content-box-row-between">
						<view class="content-box-center project-item-box" @click="onClickItem('source', item.id)">
							<view>{{ item.sourceNumber }}</view>
							<view>数据源</view>
						</view>
						<view class="content-box-center project-item-box" @click="onClickItem('config', item.id)">
							<view>{{ item.configNumber }}</view>
							<view>配置项</view>
						</view>
						<view class="content-box-center project-item-box" @click="onClickItem('policy', item.id)">
							<view>{{ item.policyNumber }}</view>
							<view>策略</view>
						</view>
					</view>
					<view class="content-box-row-between">
						<view class="content-box-center project-item-box" @click="onClickItem('component', item.id)">
							<view>{{ item.componentNumber }}</view>
							<view>组件</view>
						</view>
						<view class="content-box-center project-item-box" @click="onClickItem('func', item.id)">
							<view>{{ item.functionNumber }}</view>
							<view>函数</view>
						</view>
						<view class="content-box-center project-item-box" @click="onClickItem('flow', item.id)">
							<view>{{ item.flowNumber }}</view>
							<view>流程</view>
						</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		name: 'ProjectPage',
		data() {
			return {
				indexList: [],
				keyword: "",
				isLoading: true,
				token: '',
			}
		},
		onLoad() {
			this.getProjects()
		},
		methods: {
			getProjects(keyword) {
				uni.getStorage({
					key: "token",
					success: (token) => {
						this.token = token.data
						this.isLoading = true
						uni.request({
							url: "/api/projects",
							method: "GET",
							header: {
								Authorization: token.data,
							},
							success: (res) => {
								this.isLoading = false
								if(res.data.code === 200) {
									this.indexList = res.data.data
									if(keyword) {
										this.searchProject(keyword)
									}
								} else {
									this.$refs.uNotify.show({
										top: 10,
										type: 'error',
										color: '#ff0000',
										bgColor: '#2f3233',
										message: res.data.msg,
										duration: 1000 * 3,
										fontSize: 14,
										safeAreaInsetTop: false
									})
								}
							}
						})
					},
					fail: (res) => {
						uni.clearStorage()
						uni.redirectTo({
							url: "/pages/index/index"
						})
					}
				})
			},
			scrolltolower() {
				
			},
			searchProject(value) {
				this.indexList = this.indexList.filter((item) => {
					return item.name.indexOf(value) > -1
				})
			},
			onClickItem(type, id) {
				uni.navigateTo({
					url: "/pages/project/directory/directory?type=" + type + "&id=" + id
				})
			},
		}
	}
</script>

<style>
	.project-box {
		width: 100%;
		border: none;
		background-color: aliceblue;
		margin-bottom: 16px;
		border-radius: 5px;
	}
	
	.project-header-box {
		position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
		margin-top: 8px;
		margin-left: 8px;
	}
	
	.project-item-box {
		width: 100px;
		margin-bottom: 8px;
	}
</style>
